<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.bot{
				width: 100%;
				position: relative;
			}
			.box{
				width: 1232px;				
				padding: 15px;
				margin: 10px auto;
			}
			ul{
				list-style: none;
			}
			a{
				text-decoration:none ;
				color: #333;
			}
			.box ul li{text-indent:10px;
				width: 202px;
				height: 300px;
				border: 1px black solid;
			   float: left;
			   position: relative;
			   transition: all .6s ease-out;
			}
			.box h3{
				color: #333;
				font-size: 15px;
				padding-top: 30px;
			}
			
			.box ul li img{
				width: 150px;
				height: 150px;
				position: absolute;	
				bottom: 0;	
				right: 0;	
				transition: all .6s ease-out;
			}
			.box ul .on{
				width: 402px;
				height: 300px;
				text-align: left;
			  background-color: #3288e6;
			}
			.box ul .on h3{
				color: white;
				padding-left:20px ;
			}
			.box ul .on p{
				color: white;
				padding-left:20px ;
			}
			.box ul .on img{
				width: 270px;
				height: 270px;
				position: absolute;
				bottom: 0;
				right: 0;
			}
		</style>
	</head>
	<body>
		<section class="bot">
			<div class="box">
				<ul>
					<li class="on">
						<a href="#">
						<h3>游戏手机</h3>
						<p>王者荣耀版领卷减300</p>
						<img src="img/1.png"/>
						</a>
					</li>
					
					<li >
						<a href="#">
						<h3>游戏手机</h3>
						<p>王者荣耀版领卷减300</p>
						<img src="img/2.png"/>
						</a>
					</li>
					
					<li >
						<a href="#">
						<h3>游戏手机</h3>
						<p>王者荣耀版领卷减300</p>
						<img src="img/3.png"/>
						</a>
					</li>
					
					<li >
						<a href="#">
						<h3>游戏手机</h3>
						<p>王者荣耀版领卷减300</p>
						<img src="img/4.png"/>
						</a>
					</li>
					
					<li >
						<a href="#">
						<h3>游戏手机</h3>
						<p>王者荣耀版领卷减300</p>
						<img src="img/5.png"/>
						</a>
					</li>
				</ul>
			</div>
		</section>
		
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".box ul li").hover(function(){
					$(this).addClass("on").siblings().removeClass("on");
					
				})
			})
			
		</script>
	</body>
</html>
